<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lexy - 个人博客 </title>
    
   	
   	<title>jQuery无限加载瀑布流插件masonry</title>
	<link rel="stylesheet" type="text/css" href="view/rec/css/base.css">
	<link rel="stylesheet" type="text/css" href="view/rec/css/index.css">
    
    
    <script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jQueryColor.js"></script>
	<!--这个插件是瀑布流主插件函数必须-->
	<script type="text/javascript" src="view/rec/js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="view/rec/js/infinite-scroll-docs.min.js"></script>
	<script type="text/javascript" src="view/rec/js/infinite-scroll.pkgd.min.js"></script>
	<!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
	<script type="text/javascript" src="view/rec/js/jQeasing.js"></script>
	<script src="view/bac/js/ofc-pub.js"></script>
	<script type="text/javascript">
	
		 $(function(){  
		    var $container = $('#waterfull ul');  
		  
		    $container.imagesLoaded( function(){  
		        $container.masonry({  
		            itemSelector : '.item',  
		            isAnimated : true  
		        });  
		    });  
		    
		    $('#waterfull').infiniteScroll({
		    	  // options
		    	  path: '.pagination__next',
		    	  append: '.post',
		    	  history: false,
	    	});
		    /* $('#waterfull').infinitescroll({  
	    		  navSelector  : "div.navigation", //导航的选择器，会被隐藏  
	    		  nextSelector : "div.navigation a:first",//包含下一页链接的选择器  
	    		  itemSelector : "#waterfull ",//你将要取回的选项(内容块)  
	    		  debug        : false, //启用调试信息  
	    		  loadingImg   : "/img/loading.gif", //加载的时候显示的图片  
	    		                 //默认采用："http://www.infinite-scroll.com/loading.gif"  
	    		  animate      : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有  
	    		  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150  
	    		  bufferPx     : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短  
	    		  errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数  
	    		  localMode    : true //是否允许载入具有相同函数的页面，默认为false  
   		  	},function(arrayOfNewElems){  
	    		  //程序执行完的回调函数  
   		  	  var $newElems = $(newElements);  
	   	      $newElems.fadeIn();  
	   	      return;  
    		});    */
		});   
		
		
		function getGalleryData(){
		
			var nextPageNum =$("#pageNum").val();
			
			nextPageNum = parseInt(nextPageNum)+1;
			
			var par={
    				"page":nextPageNum,
    				"tagNo":''
    				}
    		var result = doPost("getGalleryPage", par);
			var objlist = result.detail.gallery.list;
			$("#pageNum").val(nextPageNum);
			return objlist;
		}
    </script>

</head>
<body>
	<div class="content">
		<!-- 瀑布流样式开始 -->
		<div class="waterfull clearfloat" >
			<ul id="waterfull">
				<c:forEach items="${gallery.list }" var="obj">
				<li class="item">
					<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank" class="a-img">
						<img src="${obj.blog_content}" alt="">
					</a>
					<h2 class="li-title" title="${obj.blog_title}">${obj.blog_title}</h2>
					
					<div class="qianm clearfloat">
						<span class="sp1"><b>${obj.click_num}</b>浏览</span>
						<span class="sp2">${obj.update_user_name}</span>
						<span class="sp3">${obj.update_time} &nbsp;By</span>
					</div>
				</li>
				</c:forEach>
			</ul>
		</div>
		
		</div>  
			<div id="navigation" align="center">         <!-- 页面导航-->  
			<a href="getGalleryPage?page=1&tagNo=''"></a>        <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  
		</div> 
		
		<!-- loading按钮自己通过样式调整 -->
		<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
		素材加载中.....
		</div>
	</div>
	<input type="hidden" id="pageNum" value="1">

</body>
</html>